<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>audio test</title>
  <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="full-screen" content="true" />
  <meta name="screen-orientation" content="portrait" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="360-fullscreen" content="true" />
  <script src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
  <style>
    html,
    body {
      background: #aaa;
      padding: 0;
      border: 0;
      margin: 0;
      height: 100%;
    }

    .audio-btn {
      display: block;
      width: 100px;
      height: 100px;
      background: #999;
    }
  </style>
</head>

<body>
  <div>
    <button class="audio-btn audio-html-btn">
      audio tag
      <audio class="audio" src="./src/assets/tet.mp3" preload="auto"></audio>
    </button>
  </div>
  <div id="app">
    <button class="audio-btn" style="background: #f00;" @click.stop="playAudioVue">
      vue audio tag
      <audio class="audioV " src="./src/assets/tet.mp3" preload="auto">
      </audio>
    </button>
    <button class="audio-btn" style="background: #333;" @click.stop="playWebAudioVue">
      vue play webAudio
    </button>
  </div>
  <button class="audio-btn audio-btn-html" style="background: #000;">
    <span style="color:#fff">play webAudio</span>
  </button>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        context: null,
        buffer: null
      },
      mounted() {
        this.getSound()
      },
      methods: {
        getSound() {
          window.AudioContext = window.AudioContext || window.webkitAudioContext;
          this.context = new AudioContext();
          let that = this
          var request = new XMLHttpRequest();
          request.open('GET', './src/assets/tet.mp3', true);
          request.responseType = 'arraybuffer';
          //下面就是对音频文件的异步解析
          request.onload = function () {
            that.context.decodeAudioData(request.response, function (buffer) {
              that.buffer = buffer
            });
          }
          request.send();
        },
        playAudioVue() {
          let audioEl = document.querySelector('.audioV')
          audioEl.play()
        },
        playWebAudioVue() {
          var source = this.context.createBufferSource();
          source.buffer = this.buffer;//  告诉音频源 播放哪一段音频
          source.connect(this.context.destination);// 连接到输出源
          source.start(0);//开始播放
          console.log('我被播放了', this.context, source)
        }
      }
    })

    // 页面中普通audio标签播放
    let btn = document.querySelector('.audio-html-btn')
    let audio = document.querySelector('.audio')
    btn.addEventListener('click', function () {
      audio.play()
    })

    // 普通web audio 播放
    let btn2 = document.querySelector('.audio-btn-html')
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    var context = new AudioContext();
    var request = new XMLHttpRequest();
    var bufferArr = null
    request.open('GET', '音频资源', true);
    request.responseType = 'arraybuffer';
    //下面就是对音频文件的异步解析
    request.onload = function () {
      context.decodeAudioData(request.response, function (buffer) {
        bufferArr = buffer
      });
    }
    request.send();
    btn2.addEventListener('click', function () {
      var source = context.createBufferSource();
      source.buffer = bufferArr;//  告诉音频源 播放哪一段音频
      source.connect(context.destination);// 连接到输出源
      source.start(0);//开始播放
      console.log('我被播放了2', context, source)
    })

    // create el
    let btnCreate = document.createElement('button')
    btnCreate.setAttribute('class', 'audio-btn')
    btnCreate.setAttribute('style', 'background: #666;')
    btnCreate.innerHTML = "create audio tag"
    let audioCreate = document.createElement('audio')
    audioCreate.setAttribute('src', '音频资源')
    audioCreate.setAttribute('preload', 'auto')
    btnCreate.appendChild(audioCreate)
    document.body.appendChild(btnCreate)
    btnCreate.addEventListener('click', function () {
      audioCreate.play()
    })
  </script>
</body>

</html>